前段时间做一个项目,需求是对每个视频添加预览图,这个问题最终选择方案是:
用canvas.toDataYRL();来做转换获取视频的一个截图,添加到页面中,达到自动添加预览图的目的。
部分代码如下:
var testVideo = document.getElementById('my_video');
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var timer = setTimeout(function() {
context.drawImage(testVideo, 0, 0, 640, 500);
var imgURL = canvas.toDataURl('image/jpeg', 1.0);
//测试一下
console.log(imgURL);
}, 1000);
但是开发过程中遇到一个问题,在测试的时候总是提示:
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
怎么修改都不起作用,最终发现:
这个其实是由于视频文件所在的域和图片和页面所在域不同,出现跨域传输的问题。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。